<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
        <el-col :span="12">
          <div class="mbbb">
            <img src="@/assets/票务LOGO.png" alt="">
          </div>

          <el-menu
            active-text-color="#1BA9BA"
            background-color="white"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="black"
            @open="handleOpen"
            @close="handleClose"
            :router="true"
          >
            <el-menu-item index="/index/home">
              <template #title>
                <el-icon><location /></el-icon>
                <span>首页</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/index/carnumber">
              <el-icon><icon-menu /></el-icon>
              <span>车次管理</span>
            </el-menu-item>
            <el-menu-item index="/index/station">
              <el-icon><View /></el-icon>
              <span>车站管理</span>
            </el-menu-item>
            <el-menu-item index="/index/line">
              <el-icon><HomeFilled /></el-icon>
              <span>线路管理</span>
            </el-menu-item>
            <el-menu-item index="/index/ticket">
              <el-icon><Crop /></el-icon>
              <span>车票管理</span>
            </el-menu-item>
            <el-menu-item index="/index/order">
              <el-icon><PieChart /></el-icon>
              <span>订单管理</span>
            </el-menu-item>
            <el-menu-item index="/index/track">
              <el-icon><LocationFilled /></el-icon>
              <span>个人轨迹监控</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <!-- 面包屑 -->
        <el-header>
          <Bread></Bread>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  LocationFilled,
  Crop,
  PieChart,
  Setting,View,HomeFilled
} from "@element-plus/icons-vue";
import Bread from "@/components/Bread.vue";
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>

<style  scoped>
.home {
  width: 100vw;
  height: 100vh;
}
.el-container {
  width: 100%;
  height: 100%;
}
.el-aside {
  height: 100%;
}

.el-col-12 {
  max-width: 100%;
  height: 100%;
}

.el-main {
  background: rgb(234, 233, 233);
}
.el-menu--vertical {
  height: 90%;
}

.mbbb {
  width: 100%;
  height: 10%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mbbb img{
  width: 80%;
  height: 50%;
}
</style>